<template>
   <view class="content">
      <!-- 小程序头部兼容 -->
      <!-- #ifdef MP -->
      <view class="cu-bar search bg-white">
         <view class="action">
            <text>吴江</text>
            <!-- <text class="cuIcon-triangledownfill"></text> -->
         </view>
         <view class="search-form round">
            <text class="cuIcon-search"></text>
            <input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索" confirm-type="search" />
         </view>
         <view class="action">
            <text class="cuIcon-scan text-gray"></text>
         </view>
      </view>
      <!-- #endif -->

      <!-- 头部轮播 -->
      <view class="carousel-section" v-if="swipers.length">
         <!-- 标题栏和状态栏占位符 -->
         <view class="titleNview-placing"></view>
         <!-- 背景色区域 -->
         <view class="titleNview-background"></view>
         <swiper class="carousel" circular @change="swiperChange">
            <swiper-item v-for="(item, index) in swipers" :key="index" class="carousel-item">
               <image :src="item.coverImageUrl" />
            </swiper-item>
         </swiper>
         <!-- 自定义swiper指示器 -->
         <view class="swiper-dots">
            <text class="num">{{swiperCurrent+1}}</text>
            <text class="sign">/</text>
            <text class="num">{{swiperLength}}</text>
         </view>
      </view>
      <!-- 分类 -->
      <view class="cate-section">
         <view class="cate-item" v-for="(cate,index) in categories" :key="index">
            <image :src="cate.logoImageUrl"></image>
            <text>{{cate.name}}</text>
         </view>
      </view>
      <!-- 商品列表 -->
      <view class="goods-list">
         <view class="title">— 猜你喜欢 —</view>
         <view class="product-list">
            <view class="product" v-for="(product,p_index) in productList" :key="p_index" @tap="toSpu(product.id)">
               <image mode="widthFix" :src="product.skus[0].coverImageUrls[0]"></image>
               <view class="name text-lg margin-lr-sm" style="min-height:64upx;">{{product.name}}</view>
               <view class="info">
                  <view class="price text-xl  margin-sm">¥{{product.skus[0].price}}</view>
                  <!-- <view class="slogan"></view> -->
               </view>
            </view>
         </view>
         <!-- <view class="loading-text">{{loadingText}}</view> -->
      </view>

      <!-- <view class="cu-card" v-for="(x,idx) in shops" :key="idx">
         <view class="cu-item shadow" @tap="toShop(x.id)">
            <view class="title">
               <view class="text-cut">{{x.name}}</view>
            </view>
            <view class="content">
               <image :src="x.logoImage" mode="widthFix" style="width:150upx;"></image>
               <view class="desc">
                  <view class="text-content" v-html="x.description">
                  </view>
               </view> 
            </view>
         </view>
      </view>
      <view class="padding-xl">
         <button v-if="!openid" class="cu-btn block margin-tb-sm lg" :class="'bg-' + theme" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">
            {{loginBtnTest}}</button>
         <button v-else class="cu-btn block margin-tb-sm lg" :class="'bg-' + theme" @tap.stop="submit">
            <text class="cuIcon-loading2 cuIconfont-spin" v-if="loadding"></text>
            提交</button>
      </view> -->

   </view>
</template>
<script lang="ts">
// pageBase
import { BaseView } from "@/pages/baseView.ts";

import { Component, Vue, Inject, Watch, Ref } from "vue-property-decorator";
import { ShopModule } from "@/store/modules/shop";
import { QrModule } from "@/store/modules/qr";
import api from "@/utils/api";

@Component
export default class About extends BaseView {
   async onLoad(options: any) {
      console.log("options:", options);
      const scene = decodeURIComponent(options.scene);
      if (scene !== "undefined") {
         console.log("scene:", scene);
         QrModule.GetQrDetail(scene);
      }
   }

   theme = "red";

   onShareAppMessage(option: any) {
      return {
         title: "SoMall 商城版",
         path: "/pages/index/index"
      };
   }

   swipers: any[] = [];

   async loadData() {
      await api.swiper_getList({ keywords: "index" }).then((res: any) => {
         this.swipers = res.items;
         this.swiperLength = this.swipers.length;
      });
   }

   get shops() {
      return ShopModule.shops;
   }

   get categories() {
      return ShopModule.getCategories;
   }

   get productList() {
      return ShopModule.getIndexSpus;
   }

   created() {
      this.loadData();
   }

   async click() {
      uni.navigateTo({
         url: "/pages/index/about"
      });
      await api.init({ s: 123 }).then(res => {});
   }

   // 分类
   carouselList = [
      {
         src:
            "https://img.somall.top/somall/2020/04/24/gbobddyj0wpl7qod5x7maoa74dfsg4i2.jpg!w500",
         background: "rgb(203, 87, 60)"
      },
      {
         src:
            "https://img.somall.top/somall/2020/04/24/rm8ktxqh093medudqf5owfzr3vmlbv1y.jpg!w500",
         background: "rgb(205, 215, 218)"
      },
      {
         src:
            "https://img.somall.top/somall/2020/04/24/kvurlo7gqyyd5xzt68otf4b1cs8px9hy.jpg!w500",
         background: "rgb(183, 73, 69)"
      }
   ];

   swiperCurrent = 0;
   swiperLength = 0;
   //轮播图切换修改背景色
   swiperChange(e: any) {
      const index = e.detail.current;
      this.swiperCurrent = index;
   }
}
</script>
<style lang="scss">
/* #ifdef MP */
.mp-search-box {
   position: absolute;
   left: 0;
   top: 30upx;
   z-index: 9999;
   width: 100%;
   padding: 0 80upx;
   .ser-input {
      flex: 1;
      height: 56upx;
      line-height: 56upx;
      text-align: center;
      font-size: 28upx;
      color: $font-color-base;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.6);
   }
}
page {
   .cate-section {
      position: relative;
      z-index: 5;
      margin-top: -20upx;
   }
   .carousel-section {
      padding: 0;
      .titleNview-placing {
         padding-top: 0;
         height: 0;
      }
      .carousel {
         .carousel-item {
            padding: 0;
         }
      }
      .swiper-dots {
         left: 45upx;
         bottom: 40upx;
      }
   }
}
/* #endif */

/* 头部 轮播图 */
.carousel-section {
   position: relative;
   padding-top: 10px;
   .titleNview-placing {
      height: var(--status-bar-height);
      padding-top: 44px;
      box-sizing: content-box;
   }
   .titleNview-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 426upx;
      transition: 0.4s;
   }
}
.carousel {
   width: 100%;
   height: 350upx;
   .carousel-item {
      width: 100%;
      height: 100%;
      padding: 0 28upx;
      overflow: hidden;
   }
   image {
      width: 100%;
      height: 100%;
   }
}
.swiper-dots {
   display: flex;
   position: absolute;
   left: 60upx;
   bottom: 15upx;
   width: 72upx;
   height: 36upx;
   background-image: url();
   background-size: 100% 100%;

   .num {
      width: 36upx;
      height: 36upx;
      border-radius: 50px;
      font-size: 24upx;
      color: #fff;
      text-align: center;
      line-height: 36upx;
   }

   .sign {
      position: absolute;
      top: 0;
      left: 50%;
      line-height: 36upx;
      font-size: 12upx;
      color: #fff;
      transform: translateX(-50%);
   }
}

/* 分类 */
.cate-section {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   padding: 10upx;
   background: #fff;
   .cate-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: $font-sm + 2upx;
      color: $font-color-dark;
   }
   /* 原图标颜色太深,不想改图了,所以加了透明度 */
   image {
      width: 98upx;
      height: 98upx;
      margin: 12upx;
      // margin-bottom: 14upx;

      border-radius: 50%;
      // opacity: 0.7;
      // box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
   }
}

/* goods */
.goods-list {
   margin: 0 18upx;
   background-color: #f4f4f4;
   .title {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60upx;
      color: #979797;
      font-size: 24upx;
   }
   .loading-text {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60upx;
      color: #979797;
      font-size: 24upx;
   }
   .product-list {
      padding: 0;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .product {
         width: 340upx;
         border-radius: 20upx;
         background-color: #fff;
         margin: 0 0 24upx 0;
         image {
            width: 100%;
            border-radius: 20upx 20upx 0 0;
         }
         .name {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-align: justify;
            overflow: hidden;
         }
         .info {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            .price {
               color: #e65339;
               font-weight: 600;
            }
            .slogan {
               color: #807c87;
               font-size: 24upx;
            }
         }
      }
   }
}
</style>
